@import "./animation.css";
body {
    padding: 0;
    margin: 0;
    max-width: 1000px;
    /* background: #000; */
}
.my-audio {
    display: none;
}
.page4 {
    position: absolute;
    width: 100%;
    max-width: 1680px;
    height: 100%;
    background: url('../img4/背景线2.png');
    display: none;
}

.page4 .therm {
    height: 85%;
    width: 20%;
    left: 40%;
    border-radius: 0.79rem;
    background-color: #fff;
    background-size: 100% 34%;
    position: absolute;
    bottom: 0.5rem;
    border-top: 0.02rem solid #333;
    border-left: 0.02rem solid #333;
    border-right: 0.02rem solid #333;
    overflow: auto;
}
.page4 .therm-son {
    width: 100%;
    border-bottom-left-radius: 0.79rem;
    border-bottom-right-radius: 0.79rem;
    border-bottom: 0.02rem solid #333;
    background-color: #ca1a1d;
    position: absolute;
    bottom: 0;
}
.page4 .therm_point {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 2.3rem;
    background-color: #ca1a1d;
    border-radius: 1.15rem;
    border-bottom: 0.02rem solid #333;
}
.page4 .area1 {
    position: absolute;
    width: 2.3rem;
    height: 100%;
    left: 35%;
    bottom: 0.3rem;
/*    background: url(../img4/柱状图.png);
    background-repeat: no-repeat;
    background-size: 100% auto;*/
}
.page4 .area1 img{
    position: absolute;
    width: 2.3rem;
    bottom: 0;
}
.page4 .high-count {
    height: 70%;
    animation: reduce1 5s linear 1 normal;
    -moz-animation: reduce1 5s linear 1 normal;; /* Firefox */
    -webkit-animation: reduce1 5s linear 1 normal;; /* Safari and Chrome */
    -o-animation: reduce1 5s linear 1 normal;; /* Opera */
}
.page4 .high-count2 {
    height: 40%;
    animation: reduce2 5s linear 1 normal;
    -moz-animation: reduce2 5s linear 1 normal;; /* Firefox */
    -webkit-animation: reduce2 5s linear 1 normal;; /* Safari and Chrome */
    -o-animation: reduce2 5s linear 1 normal;; /* Opera */
}
.page4 .high-count3 {
    height: 22%;
    animation: reduce3 5s linear 1 normal;
    -moz-animation: reduce3 5s linear 1 normal;; /* Firefox */
    -webkit-animation: reduce3 5s linear 1 normal;; /* Safari and Chrome */
    -o-animation: reduce3 5s linear 1 normal;; /* Opera */
 }
.page4 .ke-du {
    position: absolute;
    bottom: 2.8rem;
    width: 0.56rem;
    left: 4.8rem;
}
.page4 .boy {
    position: absolute;
    left: 0.6rem;
    bottom: 1rem;
    width: 1.5rem;
    display: none;
}
.page4 .boy-in {
    animation: boyin 1s linear 1 normal;
    -moz-animation: boyin 1s linear 1 normal;; /* Firefox */
    -webkit-animation: boyin 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: boyin 1s linear 1 normal;; /* Opera */
}
.page4 .girl {
    position: absolute;
    right: 0.6rem;
    bottom: 2.6rem;
    width: 1.7rem;
    display: none;
}
.page4 .girl-in {
    animation: girlin 1s linear 1 normal;
    -moz-animation: girlin 1s linear 1 normal;; /* Firefox */
    -webkit-animation: girlin 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: girlin 1s linear 1 normal;; /* Opera */
}
.page4 .circle {
    width: 0.8rem;
    position: absolute;
    top: 0.45rem;
    right: 0.6rem;
    display: none;
}
.page4 .circle2 {
    width: 0.8rem;
    position: absolute;
    top: 11rem;
    right: 0.6rem;
    display: none;
}
.page4 .break-heart {
    width: 0.8rem;
    position: absolute;
    bottom: 0.45rem;
    left: 0.6rem;
    display: none;
}
.msg1, .msg2, .msg3, .msg4,
.msg11, .msg22, .msg33, .msg44,
.msg111, .msg222, .msg333, .msg444 {
    position: absolute;
    min-width: 3rem;
    text-align: center;
    right: 1500px;
    font-size: 0.32rem;
    padding: 0.05rem 0.2rem;
    border: 1px solid;
    border-radius: 0.5rem;
    background: #fff;
}
.msg1, .msg11, .msg111 {
    top: 2rem;
}
.msg2, .msg22, .msg222 {
    min-width: 2.5rem;
    top: 3rem;
}
.msg3, .msg33, .msg333 {
    top: 4rem;
}
.msg4, .msg44, .msg444 {
    min-width: 4.5rem;
    top: 5rem;
}
.msg-fail1, .msg-fail2 ,
.msg-fail11, .msg-fail22,
.msg-fail111, .msg-fail222 {
    position: fixed;
    text-align: center;
    font-size: 0.32rem;
    padding: 0.05rem 0.2rem;
    border: 1px solid;
    border-radius: 0.5rem;
    background: #fff;
}
.msg-fail1, .msg-fail11, .msg-fail111 {
    width: 2.2rem;
    bottom: 1.6rem;
    left: 3.2rem;
    display: none;
}
.fail1-show {
    animation: fail1 0.2s linear 1 normal;
    -moz-animation: fail1 0.2s linear 1 normal;; /* Firefox */
    -webkit-animation: fail1 0.2s linear 1 normal;; /* Safari and Chrome */
    -o-animation: fail1 0.2s linear 1 normal;; /* Opera */
}
.msg-fail2, .msg-fail22, .msg-fail222 {
    width: 4rem;
    bottom: 0.8rem;
    left: 3.2rem;
    display: none;
}
.fail2-show {
    animation: fail2 0.2s linear 1 normal;
    -moz-animation: fail2 0.2s linear 1 normal;; /* Firefox */
    -webkit-animation: fail2 0.2s linear 1 normal;; /* Safari and Chrome */
    -o-animation: fail2 0.2s linear 1 normal;; /* Opera */
}
.jian-ru-boy {
    animation: jianru 5s linear 1 normal;
    -moz-animation: jianru 5s linear 1 normal;; /* Firefox */
    -webkit-animation: jianru 5s linear 1 normal;; /* Safari and Chrome */
    -o-animation: jianru 5s linear 1 normal;; /* Opera */
}
.jian-ru-girl {
    animation: jianru 4s linear 1 normal;
    -moz-animation: jianru 4s linear 1 normal;; /* Firefox */
    -webkit-animation: jianru 4s linear 1 normal;; /* Safari and Chrome */
    -o-animation: jianru 4s linear 1 normal;; /* Opera */
}

.page4 .heart {
    position: absolute;
    left: 0.6rem;
    top: 9rem;
    width: 2rem;
    display: none;
}


.page4 .man {
    position: absolute;
    left: 0.6rem;
    bottom: 1rem;
    width: 2rem;
    display: none;
}
.page4 .man2 {
    bottom: 1rem;
}
.page4 .woman {
    position: absolute;
    right: 0.6rem;
    bottom: 1.6rem;
    width: 1.3rem;
    display: none;
}
.page4 .up-img {
    position: absolute;
    z-index: 10;
    width: 200px;
    height: 200px;
    background: url("../img4/fly_up6.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: fly-up 0.4s linear infinite alternate;
    -moz-animation: fly-up 0.4s linear infinite alternate;; /* Firefox */
    -webkit-animation: fly-up 0.4s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: fly-up 0.4s linear infinite alternate;; /* Opera */
}


.page5 {
    position: absolute;
    width: 100%;
    max-width: 1680px;
    height: 100%;
    background: url('../img4/bg1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: none;
}
.page5 .icon1 {
    position: absolute;
    left: 1rem;
    top: 3rem;
    width: 0.5rem;
}
.page5 .point-bg {
    position: absolute;
    width: 300px;
    height: 500px;
    background: url('../img4/point.jpg');
    background-size: 6%;
    display: none;
}
.page5 .zhuzi {
    width: 1.51rem;
    height: 1.10rem;
    background: gray;
    position: absolute;
    left: 3.33rem;
    bottom: 2.80rem;
    background: #ca1a1d;
}
.page5 .zhuzi-full {
    height: 9.32rem!important;
    border-top-left-radius: 1.51rem;
    border-top-right-radius: 1.51rem;
}
.page5 .zhuzi-move {
    animation: zhuzi-move 0.4s linear infinite alternate;
    -moz-animation: zhuzi-move 0.4s linear infinite alternate;; /* Firefox */
    -webkit-animation: zhuzi-move 0.4s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: zhuzi-move 0.4s linear infinite alternate;; /* Opera */
}
.page5 .jump_heart {
    position: absolute;
    z-index: 2;
    left: 3.06rem;
    bottom: 2.90rem;
    width: 2rem;
    height: 1.8rem;
    background: url("../img4/jump_heart5.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: jump_heart 0.4s linear infinite alternate;
    -moz-animation: jump_heart 0.4s linear infinite alternate;; /* Firefox */
    -webkit-animation: jump_heart 0.4s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: jump_heart 0.4s linear infinite alternate;; /* Opera */
}
.page5 .zhiwen {
    position: absolute;
    left: 3.28rem;
    bottom: 0.8rem;
    width: 1.6rem;
    height: 1.6rem;
    animation: zhiwen-move 0.4s linear infinite alternate;
    -moz-animation: zhiwen-move 0.4s linear infinite alternate;; /* Firefox */
    -webkit-animation: zhiwen-move 0.4s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: zhiwen-move 0.4s linear infinite alternate;; /* Opera */
}
.page5 .page5-word6 {
    position: absolute;
    left: 1.28rem;
    bottom: 2.7rem;
    width: 5.6rem;
}
.page5 .word-box {
    position: absolute;
    width: 3.30rem;
    height: 5rem;
    top: 5rem;
    left: 0.05rem;
}
.page5 .word-box img {
    position: absolute;
    display: none;
}
.page5 .word-box img:nth-child(1) {
    width: 90%;
}
.page5 .word1-in {
    animation: word1-in 1s linear 1 normal;
    -moz-animation: word1-in 1s linear 1 normal;; /* Firefox */
    -webkit-animation: word1-in 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: word1-in 1s linear 1 normal;; /* Opera */
}
.page5 .word-box img:nth-child(2) {
    width: 98%;
    top: 0.52rem;
}
.page5 .word2-in {
    animation: word2-in 1s linear 1 normal;
    -moz-animation: word2-in 1s linear 1 normal;; /* Firefox */
    -webkit-animation: word2-in 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: word2-in 1s linear 1 normal;; /* Opera */
}
.page5 .word-box img:nth-child(3) {
    width: 96%;
    top: 1.08rem;
}
.page5 .word3-in {
    animation: word3-in 1s linear 1 normal;
    -moz-animation: word3-in 1s linear 1 normal;; /* Firefox */
    -webkit-animation: word3-in 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: word3-in 1s linear 1 normal;; /* Opera */
}
.page5 .word-box img:nth-child(4) {
    width: 80%;
    top: 1.56rem;
}
.page5 .word4-in {
    animation: word4-in 1s linear 1 normal;
    -moz-animation: word4-in 1s linear 1 normal;; /* Firefox */
    -webkit-animation: word4-in 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: word4-in 1s linear 1 normal;; /* Opera */
}
.page5 .word-box img:nth-child(5) {
    width: 98%;
    top: 2.20rem;
}
.page5 .word5-in {
    animation: word5-in 1s linear 1 normal;
    -moz-animation: word5-in 1s linear 1 normal;; /* Firefox */
    -webkit-animation: word5-in 1s linear 1 normal;; /* Safari and Chrome */
    -o-animation: word5-in 1s linear 1 normal;; /* Opera */
}

.page5 .left-fly-heart, .right-fly-heart {
    position: fixed;
    display: none;
}
.flying_left {
    animation: flying-left 6s linear infinite normal;
    -moz-animation: flying-left 6s linear infinite normal; /* Firefox */
    -webkit-animation: flying-left 6s linear infinite normal; /* Safari and Chrome */
    -o-animation: flying-left 6s linear infinite normal; /* Opera */
}
.flying_right {
    animation: fly-right 7s linear infinite normal;
    -moz-animation: fly-right 7s linear infinite normal; /* Firefox */
    -webkit-animation: fly-right 7s linear infinite normal; /* Safari and Chrome */
    -o-animation: fly-right 7s linear infinite alternate; /* Opera */
}

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .page5 .jump_heart {
        position: absolute;
        z-index: 2;
        left: 3.06rem;
        bottom: 3.90rem;
        width: 2rem;
        height: 1.8rem;
        background: url("../img4/jump_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        animation: jump_heart 0.4s linear infinite alternate;
        -moz-animation: jump_heart 0.4s linear infinite alternate;; /* Firefox */
        -webkit-animation: jump_heart 0.4s linear infinite alternate;; /* Safari and Chrome */
        -o-animation: jump_heart 0.4s linear infinite alternate;; /* Opera */
    }
    .page5 .zhiwen {
        position: absolute;
        left: 3.28rem;
        bottom: 1.8rem;
        width: 1.6rem;
        height: 1.6rem;
        animation: zhiwen-move 0.4s linear infinite alternate;
        -moz-animation: zhiwen-move 0.4s linear infinite alternate;; /* Firefox */
        -webkit-animation: zhiwen-move 0.4s linear infinite alternate;; /* Safari and Chrome */
        -o-animation: zhiwen-move 0.4s linear infinite alternate;; /* Opera */
    }
    .page5 .page5-word6 {
        position: absolute;
        left: 1.28rem;
        bottom: 3.7rem;
        width: 5.6rem;
    }
}